<div class="position-relative w-100 h-100">
  @let devices = (deviceManager.devices$ | async);
  <div class="w-100 h-100 position-absolute d-flex flex-column" [class.opacity-0]="shells.length === 0">
    <div class="d-flex flex-row overflow-hidden pt-2 w-100 flex-nowrap border-bottom bg-panel">
      <ul ngbNav #nav="ngbNav" class="terminal-tabs nav-tabs flex-shrink-1 flex-nowrap border-bottom-0 px-2"
          [animation]="false" [(activeId)]="currentShell">
        @for (shell of shells; track shell.token) {
          <li [ngbNavItem]="shell.token" [destroyOnHide]="false"
              (shown)="focusShell(shell)">
            <a class="text-nowrap" ngbNavLink>
              @if (shell.state.which === 'Connecting') {
                <div class="spinner-border spinner-border-sm text-primary" role="status">
                  <span class="visually-hidden">Connecting...</span>
                </div>
              }
              {{ shell.title }}
              <span class="close position-relative ps-2 font-weight-light"
                    (click)="closeTab(shell.token);$event.preventDefault();$event.stopImmediatePropagation();">×</span>
            </a>
            <ng-template ngbNavContent>
              @switch (shell.state.which) {
                @case ('Connecting') {
                  <div class="terminal-tab-page p-1">
                    Connecting to {{ shell.title }}...
                  </div>
                }
                @case ('Error') {
                  <div class="terminal-closed p-1">
                    <div>Error: {{ shell.state.error.reason }}</div>
                  </div>
                }
                @case ('Exited') {
                  <div class="terminal-closed p-1">
                    <div>Shell exited with: {{ shell.state.returnCode }}</div>
                  </div>
                }
                @case ('Connected') {
                  @if (shell.hasPty) {
                    @if (termSize) {
                      <!--suppress JSUnusedGlobalSymbols -->
                      <app-terminal-pty class="terminal-tab-page" [token]="shell.token" [size]="termSize"
                                        [readonly]="shell.state.which !== 'Connected'"
                                        #terminal></app-terminal-pty>
                    }
                    @if (pendingResize) {
                      <div class="terminal-resize">
                        {{ pendingResize.rows }} &times; {{ pendingResize.cols }}
                      </div>
                    }
                  } @else {
                    <!--suppress JSUnusedGlobalSymbols -->
                    <app-terminal-dumb class="terminal-tab-page" [token]="shell.token"
                                       [readonly]="shell.state.which !== 'Connected'"
                                       #terminal></app-terminal-dumb>
                  }
                }
              }
            </ng-template>
          </li>
          <li>
          </li>
        }
      </ul>
      @if (devices) {
        <div class="btn-group btn-group-sm my-1 mx-2 flex-shrink-0 flex-nowrap" role="group" aria-label="New Tab">
          <button type="button" class="btn btn-secondary" (click)="newTab()">
            <i class="bi bi-plus-lg"></i>
          </button>
          <div class="btn-group btn-group-sm" ngbDropdown role="group" container="body"
               aria-label="Button group with nested dropdown">
            <button type="button" class="btn btn-secondary" ngbDropdownToggle></button>
            <div class="dropdown-menu" ngbDropdownMenu>
              @for (device of devices; track device.name) {
                <button ngbDropdownItem
                        (click)="newTab(device)">{{ device.name }}
                </button>
                <!--            <div class="dropdown-divider"></div>-->
                  <!--            <button ngbDropdownItem>Open in system terminal...<i class="bi bi-box-arrow-up-right ms-2"></i></button>-->
              }
            </div>
          </div>
        </div>
      }
    </div>
    <div class="overflow-hidden flex-fill position-relative">
      <div class="position-absolute w-100 h-100 top-0 bottom-0">
        <app-terminal-size-calculator [(size)]="termSize" (pendingResizeChange)="pendingResize = $event">
        </app-terminal-size-calculator>
      </div>
      <div class="position-absolute w-100 h-100 top-0 bottom-0 tabs-container" [ngbNavOutlet]="nav"></div>
    </div>
  </div>

  @if (shells.length === 0) {
    <div class="position-absolute w-100 h-100 p-3">
      <h4>Select a device to start terminal session</h4>
      @if (devices) {
        <div class="list-group mt-3">
          @for (device of devices; track device.name) {
            <button class="list-group-item list-group-item-action" type="button" (click)="newTab(device)"
                    attr.aria-label="New shell on {{ device.name }}">
              {{ device.name }}
              <span class="float-end text-secondary">{{ device.username }}</span>
            </button>
          }
        </div>
      }
    </div>
  }
</div>
